<template>
  <el-dialog title="提示" :visible.sync="show" :size="size">
    <div style="width:100%;text-align: center;">
      <div style="width:100%;float:left;text-align: center;background-color: #DDA0DD;border: 1px solid #e3e3e3;" >
        <div class="gear onebusiness green" style="width:30%;float:left;">
          <div class="svgcircle-big" style=""></div>
          <div class="svgcircle-small" style=""></div>
        </div>
        <div class="health"  style="cursor:pointer;width:30%;float:left;padding-top:50px;">
          <div style="">健康指数</div>
          <div style="">
            <span style="font-size: 36px;">90</span>
          </div>
        </div>
        <div class="warnning" style="width:40%;float:left;">
          <div ref="warnning" style="height:200px;width:100%;"></div>
        </div>
      </div>
      <div style="width:100%;float:left;border: 1px solid #e3e3e3;margin-bottom: 10px;padding:10px 0;">
        <div style="width:30%;float:left;">
          <!-- <el-progress type="circle" :percentage="89":width="100">89</el-progress> -->
          <div id="progress1"></div>
          <div>
            <span>健康度</span>
          </div>
        </div>
        <div style="width:30%;float:left;">
          <!-- <el-progress type="circle" :percentage="25" :width="100">25</el-progress> -->
          <div id="progress2"></div>
          <div>
            <span>繁忙度</span>
          </div>
        </div>
        <div style="float:left;width:0.1%;height:100px;background-color:#e3e3e3"></div>
        <div style="width:39.9%;float:left;">
          <ul style="width:100%; height:100px;  overflow-y: auto; text-align: left;">
            <li style="padding:5px 10px;">
              <span class="deviceName">核心交换机:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">服务器:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">中间件:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">数据库:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">存储设备:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">硬件监控:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">虚拟机:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
            <li style="padding:5px 10px;">
              <span class="deviceName">其它:</span>
              <span class="deviceNum">2</span>
              <span class="unit">台</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import echarts from 'libs/graph/echarts.min.js' 
export default {
  name: 'test',
  data() {
    return {
      show: true,
      size: 'small'
    }
  },
  methods: {
    echarts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.warnning);

      let option = {
        xAxis: [
          {
            type: 'value',
            min: 0,
            max: 3,
            interval: 1,
            axisLabel: {
              margin: 2
            },
            // axisTick: {
            //   alignWithLabel: true,
            //   length: 1
            // }
          }

        ],
        yAxis: [
          {
            type: 'category',
            // splitNumber :3,
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
              interval: 0,
              length: 1
            },
            axisLabel: {
              interval: 0,
              fontSize: 12,
              margin: 3
            },
            data: ['普通', '重要', '关键']
          }
        ],
        series: [
          {
            type: 'bar',
            data: [0, 0, 0]
          }
        ]
      };

      // 为echarts对象加载数据
      myChart.setOption(option);
      console.log($(progress1))
      $('#progress1').radialIndicator({
          barWidth: 6,
          initValue: 40,
          roundCorner : true,
          percentage: true,
          barColor: {
              0: '#FF0000',
              33: '#FFFF00',
              66: '#0066FF',
              100: '#33CC33'
          }
      });
      $('#progress2').radialIndicator({
          barWidth: 6,
          initValue: 80,
          roundCorner : true,
          percentage: true,
          barColor: {
              0: '#FF0000',
              33: '#FFFF00',
              66: '#0066FF',
              100: '#33CC33'
          }
      });
    }
  },
  mounted() {
    this.$nextTick(function() {
      // Code that will run only after the
      // entire view has been rendered
      this.echarts()
    })
  }
}
</script>
<style>
.aaa{
  text-align: center;
}
</style>
